//全局数据定义
//图片新闻数据集合
var newsPicArray = getNewsPicArray(document.getElementsByClassName("first")[0]);
var len = newsPicArray.length;
//定时器开关标志
var flag;
//定时器开始位置
var current = 0;



//1显示对应图片、标题、链接
function showPic(whichPic) {
    var placeholder = document.getElementById("placeholder");

    var description = document.getElementById("description");
    //显示内容数据
    var imgSrc = whichPic.getAttribute("data-image");
    //标题
    var newsTitle = whichPic.getAttribute("title");
    //链接地址
    var  url = whichPic.getAttribute("data-url");
    console.log(imgSrc + "|" + newsTitle + "|" +url);

    //设置
    placeholder.setAttribute("src",imgSrc);
    placeholder.setAttribute("href",url);
    description.innerText = newsTitle;

    whichPic.parentElement.style.backgroundColor = "#ff0000";

}


//2默认显示的图片新闻 获得li.first的子标签a
//console.log(document.getElementsByClassName("first")[0].firstChild);
//showPic(document.getElementsByClassName("first")[0].firstChild);

//3图片轮播 (定时器)
//方法一 setInterval()间隔时间定时，类似循环
//方法二 setTimeout()定时启动，类似单次

//获取图片新闻的相关数据，访问图片新闻li，相关数据存放到集合中
function getNewsPicArray(cur) {
    var _arr = [];
    while (cur && cur.nodeType ===1){
        _arr.push(cur);
        cur = cur.nextElementSibling;//下一个相邻节点
    }
    return _arr;
}

//图片新闻伦波显示
function circleShowPic() {
    showPic(newsPicArray[current].firstChild);
    flag = setInterval(function () {
        current = ++current > len - 1 ? 0 :current;//边界计算

        showPic(newsPicArray[current].firstChild);

        newsPicArray[current === 0 ? len - 1 : current - 1].removeAttribute("style");//走过的变回原来颜色
    },3000);//1000毫秒=1s
}


//更改后的a标签点击处理：重新开始图片轮播，重置定时器
function clickShowPic(whichPic) {
    //停止定时器
    clearInterval(flag);
    //去除轮播中li背景颜色
    newsPicArray[current].removeAttribute("style");
    //获取点击的索引
    current = parseInt(whichPic.innerText) - 1;
    //开始定时器
    circleShowPic();



}


circleShowPic();



